<template>
  <a-row type="flex" style="flex-flow: inherit;">
    <a-col :flex="toggle ? '320px' : '30px'" style="margin-right: 12px;background-color: #fff;">
      <organizationTree ref="tree" :rootOpened="true" :multi="false" @ok="getTreeData" @toggleBool="toggleBool" @select="onOrganizeSelect" @detail-click="onOrganizeDetail">
        
      </organizationTree>
      <!-- <groups-tree @tree="getTreeData" @selectedKeys="getSelectedKeys" /> -->
    </a-col>
    <a-col flex="auto">
      <a-card class="topBox" :bordered="false" style="margin-bottom: 10px">
        <!-- 查询区域 -->
        <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
          <a-row>
            <a-col :span="7">
              <a-form-model-item label="机构名称">
                <a-input v-model="form.organizationName" placeholder="请输入" style="width:100%;"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="7">
              <a-form-model-item label="负责人">
                <a-input v-model="form.personCharge" placeholder="请输入" style="width:100%;"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="7">
              <a-form-model-item label="组织形式">
                <a-select v-model="form.organizationForm" placeholder="请选择">
                  <a-select-option :value="1">
                    合伙
                  </a-select-option>
                  <a-select-option :value="2">
                    个人
                  </a-select-option>
                  <a-select-option :value="3">
                    合资
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="4">
              <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
                <a-button type="primary" @click="onQuery"> 查询 </a-button>
                <a-button style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-card>
      <a-card :bordered="false">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button type="primary" @click="onAddOrganize()">新增机构</a-button>
          <!-- <a-button :disabled="isDisabled" @click="handleProups()">导出</a-button> -->
        </div>
        <!-- 表格展示 -->
        <div class="table-page-content">
          <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="true" :loading="loading"
            :columns="columns" :dataSource="pageData" @selectedRow="onSelectedRow" @change="onTableChange">
            <!--操作-->
            <template slot="action" slot-scope="text, record">
              <a-button @click="onEditOrganize(record.id)" type="link" style="padding: 0">编辑</a-button>
              <a-divider type="vertical" />
              <a-button @click="onAddLawyer(record)" type="link" style="padding: 0">新增咨询师</a-button>
              <a-divider type="vertical" />
              <a-button @click="onOrganizeDetail(record)" type="link" style="padding: 0">详情</a-button>
              <a-divider type="vertical" />
              <a-popconfirm title="是否要删除记录吗?" ok-text="是" cancel-text="否" @confirm="onDeleteOrganize(record)">
                <a style="color: #333;">删除</a>
              </a-popconfirm>
              <a-divider type="vertical" />
            </template>
          </z-table>
        </div>
      </a-card>
    </a-col>
    
    <OrganizeModal ref="OrganizeModal" @success="organizeSuccess" :disabled="isOrganizeDetail"></OrganizeModal>
    <LawyerModal ref="LawyerModal" @success="onQuery()"></LawyerModal>
  </a-row>
</template>

<script>
import moment from 'moment'
  import {
    pageNewMech,
    delMech,
    viewMech
  } from '@/api/sjsk/psycholog/organize'
  
  
import OrganizeModal from '../modules/OrganizeModal.vue'
  import LawyerModal from '../modules/LawyerModal.vue'
// import * as peopleApi from '@/api/wxSmuggle/people.js'
import OrganizationTree from '../modules/organizationTree'
export default {
  components: {
    OrganizationTree,
    
    OrganizeModal,
    LawyerModal
  },
  data() {
    return {
      moment,
      labelCol: { span: 6 },
      wrapperCol: { span: 17 },
      rangePickerTime: [],
      loading: false,
      visible: false,
      isDisabled: true,
      reloading: false,
      selectKeys: [],
      form: {
      },
      treeDatas: [],
      toggle: true,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '机构名称',
          dataIndex: 'organizationName',
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={text} length={20} />
          },
        },
        {
          title: '负责人',
          dataIndex: 'personCharge',
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={text} length={20} />
          },
        },
        {
          title: '联系电话',
          dataIndex: 'phone',
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={text} length={14} />
          },
        },
        {
          title: '组织形式',
          dataIndex: 'organizationForm',
          align: 'center',
          customRender: (text) => {
            let str = ''
            switch (text){
              case '1':
              str = '合伙'
                break;
              case '2':
              str = '个人'
                break;
              case '3':
              str = '合资'
                break;
            }
            return <j-ellipsis value={str} length={14} />
          },
        },
        {
          title: '机构地址',
          dataIndex: 'organization',
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={text} length={14} />
          },
        },
        {
          title: '咨询师人数',
          dataIndex: 'psyTeacherNum',
          align: 'center',
        },
        {
          title: '操作',
          width: 160,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {
        records: []
      },
      curOrganize: {},
      isOrganizeDetail: false
    }
  },
  created() {
    this.onQuery()
  },
  async mounted() {
    
  },

  methods: {
    onAddLawyer(item) {
      this.$refs.LawyerModal.show(null, item.id)
    },
    
    
    
    // 选中组织机构
    onOrganizeSelect(organize, checkedKeys) {
      console.log('organize')
      console.log(organize)
      this.curOrganize = organize
      this.onQuery()
    },
    
    
    
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.form = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },
    onTimeChange() {

    },
    onStatusChange() {

    },
    onSelectedRow(keys) {
      this.selectKeys = keys
      this.isDisabled = keys.length > 0 ? false : true
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      let form = Object.assign({}, this.form, this.pageFilter)
      this.loading = true
      
      form.departmentId = this.curOrganize.code || 460000000000
      pageNewMech(form).then((res) => {
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            this.loading = false
            this.$refs.table.onClearRowKeys()
          } else {
            this.loading = false
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    getSelectedKeys(keys) {
      console.log(keys)
      this.$set(this.form, 'labelId', keys.join(','))
      this.onQuery()
    },
    
    // 新增机构
    onAddOrganize() {
      this.isOrganizeDetail = false
      this.$nextTick(() => {
        this.$refs.OrganizeModal.show(null, this.curOrganize)
      })
    },
    // 删除机构
    onDeleteOrganize(item) {
      
      const { id,  organizationName} = item
      this.$confirm({
        title: '确认提示',
        content: `是否确定删除${organizationName}`,
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          delMech({id}).then(res => {
            this.onQuery()
          })
        }
      })
    },
    // 编辑机构
    onEditOrganize(id) {
      this.isOrganizeDetail = false
      console.log(id)
      this.$nextTick(() => {
        viewMech({id}).then(res => {
          const { result } = res
          this.$refs.OrganizeModal.show(result)
        })
      })
    },
    // 查看机构详情
    onOrganizeDetail(item) {
      this.isOrganizeDetail = true
      this.$nextTick(() => {
        this.$router.push({
          path: '/psycholog/organize/detail',
          query: {
            id: item.id
          }
        })
      })
    },
    organizeSuccess() {
      console.log('suceess')
      this.onQuery()
    },
    

    
    
    

    // 修改分组
    handleProups() {
      let selectList = this.$refs.table.getSelectedRows()
      let idList = selectList.map((v) => v.id).filter((obj) => obj !== null && obj !== undefined && obj !== '')
      this.$refs.groupsModalRef.edit(idList)
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },
    getTreeData(datas) {
      console.log(datas, id)
      console.log(id)
    },
    toggleBool(bool) {
      console.log(bool)
      this.toggle = bool
    }
  },
}
</script>
<style lang="less" scoped>
.topBox /deep/.ant-row {
  margin-bottom: 0;
}

/deep/.ant-col-7 {
  width: 28%;
}

/deep/.ant-col-4 {
  width: 16%;
}
</style>
